import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:go_router/go_router.dart';
import 'package:oktoast/oktoast.dart';
import 'package:provider/provider.dart';
import 'package:wan_android/model/user/user_page_model.dart';
import 'package:wan_android/pages/home_page/home_page.dart';

class SignUpPage extends StatefulWidget {
  const SignUpPage({super.key});

  @override
  State<SignUpPage> createState() => _SignUpPageState();
}

class _SignUpPageState extends State<SignUpPage> {
  final _formKey = GlobalKey<FormState>();
  final TextEditingController _userController = TextEditingController();
  final TextEditingController _pwdController = TextEditingController();
  final TextEditingController _rePwdController = TextEditingController();
  
  @override
  Widget build(BuildContext context) {
    UserPageModel userPageModel = Provider.of<UserPageModel>(context, listen: false);

    return Scaffold(
      appBar: AppBar(
        title: const Text('注册', style: TextStyle(color: Colors.white)),
        backgroundColor: Colors.blueAccent,
        iconTheme: const IconThemeData(color: Colors.white),
      ),

      body: Stack(
        children: [
          ClipPath(
            clipper: HalfCircleClipper(),
            child: Container(
              height: 600.h,
              color: Colors.blueAccent,
            ),
          ),

          SingleChildScrollView(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                SizedBox(height: 500.h),
                Padding(
                  padding: EdgeInsets.symmetric(horizontal: 40.w, vertical: 30.h),
                  child: Card(
                    child: Padding(
                      padding: EdgeInsets.symmetric(horizontal: 40.w, vertical: 40.h),
                      child: Form(
                        key: _formKey,
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: [
                            Padding(
                              padding: EdgeInsets.symmetric(vertical: 20.h),
                              child: TextFormField(
                                controller: _userController,
                                decoration: const InputDecoration(
                                  prefixIcon: Icon(Icons.person_outline, color: Colors.blueAccent),
                                  hintText: '用户名'
                                ),
                                validator: (value) {
                                  if (value == null || value.isEmpty) {
                                    return '请输入用户名';
                                  }
                                  return null;
                                },
                              ),
                            ),
                            
                            Padding(
                              padding: EdgeInsets.symmetric(vertical: 20.h),
                              child: TextFormField(
                                controller: _pwdController,
                                decoration: const InputDecoration(
                                  prefixIcon: Icon(Icons.lock_outline, color: Colors.blueAccent),
                                  hintText: '密码'
                                ),
                                obscureText: true,
                                validator: (value) {
                                  if (value == null || value.isEmpty) {
                                    return '请输入密码';
                                  }
                                  return null;
                                },
                              ),
                            ),

                            Padding(
                              padding: EdgeInsets.symmetric(vertical: 20.h),
                              child: TextFormField(
                                controller: _rePwdController,
                                decoration: const InputDecoration(
                                  prefixIcon: Icon(Icons.lock_outline, color: Colors.blueAccent),
                                  hintText: '确认密码'
                                ),
                                obscureText: true,
                                validator: (value) {
                                  if (value == null || value.isEmpty) {
                                    return '请输入密码';
                                  }

                                  if (value != _pwdController.text) {
                                    return '两次密码输入不一致,请重新输入';
                                  }

                                  return null;
                                },
                              ),
                            ),

                            Padding(
                              padding: EdgeInsets.only(top: 30.h),
                              child: SizedBox(
                                width: double.infinity,
                                height: 64.h,
                                child: ElevatedButton(
                                  style: ElevatedButton.styleFrom(
                                    backgroundColor: Colors.blueAccent
                                  ),
                                  child: const Text('注 册', style: TextStyle(color: Colors.white),),
                                  onPressed: () async {
                                    if (_formKey.currentState!.validate()) {
                                      Map<String, String> params = {
                                        'username': _userController.text,
                                        'password': _pwdController.text,
                                        'repassword': _rePwdController.text
                                      };
                                      bool res = await userPageModel.onRegister(params);
                                      if (res) {
                                        showToast(
                                          '注册成功',
                                          // duration: const Duration(seconds: 2),
                                          position: ToastPosition.top,
                                        );
                                        context.pop(_userController.text);
                                        return;
                                      }
                                      showToast(
                                        '注册失败',
                                        // duration: const Duration(seconds: 2),
                                        position: ToastPosition.top,
                                      );
                                    }
                                  },
                                ),
                              )
                            )

                            // Padding(
                            //   padding: EdgeInsets.symmetric(vertical: 30.h),
                            //   child: ElevatedButton(
                            //     style: ElevatedButton.styleFrom(
                            //       backgroundColor: Colors.blueAccent
                            //     ),
                            //     child: const Text('注 册', style: TextStyle(color: Colors.white),),
                            //     onPressed: () {
                            //       if (_formKey.currentState!.validate()) {
                            //         print('调用注册接口');
                            //         showToast(
                            //           '注册成功',
                            //           // duration: const Duration(seconds: 2),
                            //           position: ToastPosition.top,
                            //         );
                            //         context.go('/login', extra: _userController.text);
                            //       }
                            //     },
                            //   ),
                            // )
                          ],
                        ),
                      )
                    ),
                  )
                )
              ],
            )
          ),
        ],
      ),
    );
  }
}



class HalfCircleClipper extends CustomClipper<Path> {

  @override
  Path getClip(Size size) {
    final path = Path();
    path.lineTo(0, size.height / 2); // 从左上角到左边中间
    path.quadraticBezierTo(
      size.width / 2, size.height, // 控制点
      size.width, size.height / 2 // 终点
    );
    path.lineTo(size.width, 0); // 从中间到右上角
    path.close(); // 闭合路径
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}